<template>
  <div class="ware-container">
    <div class="welcome-section">
      <div class="welcome-header">
        <h2>仓储管理中心</h2>
        <p class="sub-title">实时掌握仓库动态，提高库存管理效率</p>
      </div>
      <div class="refresh-button">
        <el-button type="primary" size="small" :icon="Refresh" @click="refreshData" :loading="refreshing">刷新数据</el-button>
      </div>
    </div>
    
    <!-- 数据总览卡片 -->
    <div class="data-overview">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card shadow="hover" class="data-card warehouse-card">
            <div class="data-card-body">
              <div class="data-icon">
                <el-icon><OfficeBuilding /></el-icon>
              </div>
              <div class="data-info">
                <h3>{{ stats.warehouseCount }}</h3>
                <p>仓库总数</p>
              </div>
            </div>
            <div class="card-footer">
              <el-link type="primary" @click="navigateTo('/ware/warehouse')">查看详情</el-link>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="data-card inbound-card">
            <div class="data-card-body">
              <div class="data-icon">
                <el-icon><Promotion /></el-icon>
              </div>
              <div class="data-info">
                <h3>{{ stats.todayGrnCount }}</h3>
                <p>今日入库单</p>
              </div>
            </div>
            <div class="card-footer">
              <el-link type="primary" @click="navigateTo('/ware/in')">查看详情</el-link>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="data-card outbound-card">
            <div class="data-card-body">
              <div class="data-icon">
                <el-icon><Sell /></el-icon>
              </div>
              <div class="data-info">
                <h3>{{ stats.todayDeliveryCount }}</h3>
                <p>今日出库单</p>
              </div>
            </div>
            <div class="card-footer">
              <el-link type="primary" @click="navigateTo('/ware/out')">查看详情</el-link>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="data-card warning-card">
            <div class="data-card-body">
              <div class="data-icon">
                <el-icon><WarningFilled /></el-icon>
              </div>
              <div class="data-info">
                <h3>{{ stats.lowStockCount }}</h3>
                <p>库存预警</p>
              </div>
            </div>
            <div class="card-footer">
              <el-link type="danger" @click="navigateTo('/ware/inventory')">立即处理</el-link>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    
    <!-- 功能模块导航 -->
    <h3 class="section-title">业务功能</h3>
    <div class="feature-modules">
      <el-row :gutter="20">
        <!-- 库存查询 -->
        <el-col :span="6">
          <el-card shadow="hover" @click="navigateTo('/ware/inventory')" class="feature-card">
            <div class="feature-icon">
              <el-icon><DataLine /></el-icon>
            </div>
            <div class="feature-info">
              <h4>库存查询</h4>
              <p>实时查看库存状态与动态</p>
            </div>
          </el-card>
        </el-col>
        
        <!-- 入库管理 -->
        <el-col :span="6">
          <el-card shadow="hover" @click="navigateTo('/ware/in')" class="feature-card">
            <div class="feature-icon">
              <el-icon><TopRight /></el-icon>
            </div>
            <div class="feature-info">
              <h4>入库管理</h4>
              <p>高效处理商品入库流程</p>
            </div>
          </el-card>
        </el-col>
        
        <!-- 出库管理 -->
        <el-col :span="6">
          <el-card shadow="hover" @click="navigateTo('/ware/out')" class="feature-card">
            <div class="feature-icon">
              <el-icon><BottomRight /></el-icon>
            </div>
            <div class="feature-info">
              <h4>出库管理</h4>
              <p>便捷操作商品出库流程</p>
            </div>
          </el-card>
        </el-col>
        
        <!-- 仓库管理 -->
        <el-col :span="6">
          <el-card shadow="hover" @click="navigateTo('/ware/warehouse')" class="feature-card">
            <div class="feature-icon">
              <el-icon><OfficeBuilding /></el-icon>
            </div>
            <div class="feature-info">
              <h4>仓库管理</h4>
              <p>管理仓库基础信息设置</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <!-- 第二行功能模块 -->
      <el-row :gutter="20" style="margin-top: 20px;">
        <!-- 入库记录 -->
        <el-col :span="6">
          <el-card shadow="hover" @click="navigateTo('/ware/inbound-records')" class="feature-card">
            <div class="feature-icon">
              <el-icon><Promotion /></el-icon>
            </div>
            <div class="feature-info">
              <h4>入库记录</h4>
              <p>查询历史入库记录详情</p>
            </div>
          </el-card>
        </el-col>
        
        <!-- 出库记录 -->
        <el-col :span="6">
          <el-card shadow="hover" @click="navigateTo('/ware/outbound-records')" class="feature-card">
            <div class="feature-icon">
              <el-icon><Sell /></el-icon>
            </div>
            <div class="feature-info">
              <h4>出库记录</h4>
              <p>查询历史出库记录详情</p>
            </div>
          </el-card>
        </el-col>
        
        <!-- 库存盘点 -->
        <el-col :span="6">
          <el-card shadow="hover" @click="navigateTo('/ware/stock-count')" class="feature-card">
            <div class="feature-icon">
              <el-icon><WarningFilled /></el-icon>
            </div>
            <div class="feature-info">
              <h4>库存盘点</h4>
              <p>定期盘点库存差异调整</p>
            </div>
          </el-card>
        </el-col>
        
        <!-- 盘点审核 -->
        <el-col :span="6">
          <el-card shadow="hover" @click="navigateTo('/ware/stock-count-audit')" class="feature-card">
            <div class="feature-icon">
              <el-icon><DataLine /></el-icon>
            </div>
            <div class="feature-info">
              <h4>盘点审核</h4>
              <p>审核盘点结果与调整</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <!-- 第三行功能模块 -->
      <el-row :gutter="20" style="margin-top: 20px;">
        <!-- 库存调拨 -->
        <el-col :span="6">
          <el-card shadow="hover" @click="navigateTo('/ware/stock-transfer')" class="feature-card">
            <div class="feature-icon">
              <el-icon><Switch /></el-icon>
            </div>
            <div class="feature-info">
              <h4>库存调拨</h4>
              <p>仓库间商品调拨管理</p>
            </div>
          </el-card>
        </el-col>
        
        <!-- 调拨审核 -->
        <el-col :span="6">
          <el-card shadow="hover" @click="navigateTo('/ware/transfer-audit')" class="feature-card">
            <div class="feature-icon">
              <el-icon><Check /></el-icon>
            </div>
            <div class="feature-info">
              <h4>调拨审核</h4>
              <p>审核库存调拨申请</p>
            </div>
          </el-card>
        </el-col>
        
        <!-- 库存统计 -->
        <el-col :span="6">
          <el-card shadow="hover" @click="navigateTo('/ware/inventory-stats')" class="feature-card">
            <div class="feature-icon">
              <el-icon><TrendCharts /></el-icon>
            </div>
            <div class="feature-info">
              <h4>库存统计</h4>
              <p>库存数据统计与分析</p>
            </div>
          </el-card>
        </el-col>
        
        <!-- 占位卡片 -->
        <el-col :span="6">
          <div class="feature-card-placeholder"></div>
        </el-col>
      </el-row>
    </div>
    
    <el-row :gutter="20" class="recent-records-row">
      <el-col :span="12">
        <!-- 最近入库记录 -->
        <el-card shadow="hover" class="record-card">
          <template #header>
            <div class="card-header">
              <div class="header-left">
                <el-icon><Promotion /></el-icon>
                <span>最近入库记录</span>
              </div>
              <el-button text @click="navigateTo('/ware/in')">查看更多</el-button>
            </div>
          </template>
          <div v-if="loading.grn" class="loading-placeholder">
            <el-skeleton :rows="5" animated />
          </div>
          <div v-else-if="recentGrns.length === 0" class="empty-data">
            <el-empty description="暂无入库记录"></el-empty>
          </div>
          <div v-else>
            <el-table :data="recentGrns" style="width: 100%" size="small" :max-height="300">
              <el-table-column prop="grnCode" label="入库单号" min-width="120"></el-table-column>
              <el-table-column prop="warehouseName" label="仓库" min-width="100"></el-table-column>
              <el-table-column prop="status" label="状态" width="100">
                <template #default="scope">
                  <el-tag :type="getStatusType(scope.row.status)" size="small">{{ getStatusText(scope.row.status) }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="createdAt" label="创建时间" width="160"></el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <!-- 最近出库记录 -->
        <el-card shadow="hover" class="record-card">
          <template #header>
            <div class="card-header">
              <div class="header-left">
                <el-icon><Sell /></el-icon>
                <span>最近出库记录</span>
              </div>
              <el-button text @click="navigateTo('/ware/outbound-records')">查看更多</el-button>
            </div>
          </template>
          <div v-if="loading.delivery" class="loading-placeholder">
            <el-skeleton :rows="5" animated />
          </div>
          <div v-else-if="recentDeliveries.length === 0" class="empty-data">
            <el-empty description="暂无出库记录"></el-empty>
          </div>
          <div v-else>
            <el-table :data="recentDeliveries" style="width: 100%" size="small" :max-height="300">
              <el-table-column prop="deliveryCode" label="出库单号" min-width="120"></el-table-column>
              <el-table-column prop="warehouseName" label="仓库" min-width="100"></el-table-column>
              <el-table-column prop="status" label="状态" width="100">
                <template #default="scope">
                  <el-tag :type="getStatusType(scope.row.status)" size="small">{{ getStatusText(scope.row.status) }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="createdAt" label="创建时间" width="160"></el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { 
  Refresh, 
  OfficeBuilding, 
  Promotion, 
  Sell, 
  WarningFilled,
  DataLine,
  TopRight,
  BottomRight,
  Switch,
  Check,
  TrendCharts
} from '@element-plus/icons-vue';

const router = useRouter();
const recentGrns = ref([]);
const recentDeliveries = ref([]);
const refreshing = ref(false);

const loading = reactive({
  grn: false,
  delivery: false
});

// 统计数据
const stats = reactive({
  warehouseCount: 0,
  todayGrnCount: 0,
  todayDeliveryCount: 0,
  lowStockCount: 0
});

// 刷新所有数据
const refreshData = async () => {
  refreshing.value = true;
  try {
    await Promise.all([
      fetchRecentGrns(),
      fetchRecentDeliveries(),
      fetchStats()
    ]);
    ElMessage.success('数据已刷新');
  } catch (error) {
    console.error('刷新数据失败:', error);
    ElMessage.error('刷新数据失败');
  } finally {
    refreshing.value = false;
  }
};

// 获取最近入库记录
const fetchRecentGrns = async () => {
  loading.grn = true;
  try {
    const response = await axios.get('/api/ware/grn/list', {
      params: {
        page: 1,
        size: 5
      }
    });
    recentGrns.value = response.data.records || [];
  } catch (error) {
    console.error('获取最近入库记录失败:', error);
    recentGrns.value = [];
  } finally {
    loading.grn = false;
  }
};

// 获取最近出库记录
const fetchRecentDeliveries = async () => {
  loading.delivery = true;
  try {
    const response = await axios.get('/api/ware/delivery/list', {
      params: {
        page: 1,
        size: 5
      }
    });
    recentDeliveries.value = response.data.records || [];
  } catch (error) {
    console.error('获取最近出库记录失败:', error);
    recentDeliveries.value = [];
  } finally {
    loading.delivery = false;
  }
};

// 获取统计数据（模拟数据，实际应该从后端接口获取）
const fetchStats = async () => {
  // 这里应该调用后端统计接口，现在使用模拟数据
  stats.warehouseCount = 5;
  stats.todayGrnCount = 8;
  stats.todayDeliveryCount = 12;
  stats.lowStockCount = 3;
  
  // 实际调用接口示例：
  // try {
  //   const response = await axios.get('/api/ware/stats');
  //   stats.warehouseCount = response.data.warehouseCount;
  //   stats.todayGrnCount = response.data.todayGrnCount;
  //   stats.todayDeliveryCount = response.data.todayDeliveryCount;
  //   stats.lowStockCount = response.data.lowStockCount;
  // } catch (error) {
  //   console.error('获取统计数据失败:', error);
  // }
};

// 导航到指定路径
const navigateTo = (path) => {
  router.push(path);
};

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '草稿',
    1: '待审核',
    2: '已审核',
    3: '已完成'
  };
  return statusMap[status] || '未知';
};

// 获取状态类型
const getStatusType = (status) => {
  const typeMap = {
    0: 'info',
    1: 'warning',
    2: 'success',
    3: 'primary'
  };
  return typeMap[status] || '';
};

onMounted(() => {
  fetchRecentGrns();
  fetchRecentDeliveries();
  fetchStats();
});
</script>

<style scoped>
.ware-container {
  padding: 20px;
}

.welcome-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.welcome-header h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.sub-title {
  margin-top: 8px;
  color: #909399;
  font-size: 14px;
}

.section-title {
  font-size: 18px;
  color: #303133;
  margin: 30px 0 20px;
  font-weight: 500;
}

.data-overview {
  margin-bottom: 24px;
}

.data-card {
  height: 100%;
  transition: all 0.3s;
}

.data-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.data-card-body {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.data-icon {
  font-size: 48px;
  margin-right: 16px;
}

.warehouse-card .data-icon {
  color: #409eff;
}

.inbound-card .data-icon {
  color: #67c23a;
}

.outbound-card .data-icon {
  color: #e6a23c;
}

.warning-card .data-icon {
  color: #f56c6c;
}

.data-info h3 {
  margin: 0;
  font-size: 28px;
  font-weight: bold;
  line-height: 1.2;
}

.data-info p {
  margin: 5px 0 0;
  font-size: 14px;
  color: #909399;
}

.card-footer {
  border-top: 1px solid #ebeef5;
  padding-top: 10px;
  text-align: right;
}

.feature-modules {
  margin-bottom: 24px;
}

.feature-card {
  cursor: pointer;
  padding: 10px;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: all 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  font-size: 36px;
  margin-bottom: 12px;
  color: #409eff;
}

.feature-info h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.feature-info p {
  margin: 5px 0 0;
  font-size: 12px;
  color: #909399;
}

.record-card {
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-left i {
  margin-right: 8px;
  font-size: 18px;
}

.recent-records-row {
  margin-bottom: 20px;
}

.loading-placeholder, .empty-data {
  padding: 20px 0;
}

.empty-data {
  display: flex;
  justify-content: center;
}

.feature-card-placeholder {
  height: 120px;
  background: transparent;
}
</style>


